<template>
  <transition name="up">
    <div class="operator" v-show="Object.keys(songItem).length" @click.stop="hide">
      <div class="operator-wrapper">
        <div class="operator-header">
          <img :src="imgSrc" alt="">
          <div class="operator-title">
            <p class="song-name">歌曲:{{songItem.name}}</p>
            <p class="text" v-show="songItem.singer">
              <span v-for='v in songItem.singer' :key="v.id">
                {{v.name}}
              </span>
            </p>
          </div>
        </div>
        <div class="select">
          <ul>
            <li>
              <i class="icon-play"></i>
              <span @click="next(songItem)">下一首播放</span>
            </li>
            <li>
              <i :class="getFavoriteIcon(songItem)"></i>
              <span @click="toggleFavorite(songItem)">添加到我喜欢</span>
            </li>
            <li v-show="songItem.mv&& songItem.mv.vid">
              <i class="icon-play"></i>
              <span @click="toMV(songItem) ">MV</span>
            </li>
            <li>
              <i class="icon-add"></i>
              <span @click="getComment(songItem)">获取评论</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import { mapState } from 'vuex'
import { operatorMixin } from 'common/js/mixin'
export default {
  name: 'oper',
  mixins: [operatorMixin],
  computed: {
    ...mapState(['songItem', 'playList', 'currentIndex', 'sequenceList']),
    imgSrc() {
      return this.songItem.mid ? `https://y.gtimg.cn/music/photo_new/T002R300x300M000${this.songItem.album.mid}.jpg` : ''
    }
  },

  methods: {
    hide() {
      this.$store.commit('setSongItem', {})
    },
    toMV(item) {
      this.$router.push('/mv/' + item.mv.vid)
    },
    getComment(item) {
      const id = item.id ? item.id : item.album.id
      this.$router.push('/comment/' + id)
    },
    next(item) {
      let list = JSON.parse(JSON.stringify(this.playList))
      if (this.currentIndex === -1) {
        list.push(item)
        this.$store.commit('setCurrentIndex', 0)
      } else {
        const i = list.findIndex(v => v.mid === item.mid)
        if (i > -1) {
          list.splice(i, 1)
        }
        list.splice(this.currentIndex + 1, 0, item)
      }
      this.$store.commit('setPlayList', list)
      this.$store.commit('setSequenceList', list)
    }
  }
}
</script>
<style lang="stylus" scoped>
/* 过渡动画 */
.up-enter-active, .up-leave-active {
  opacity: 1;
  transition: all 0.5s;
}

.up-enter, .up-leave-to {
  opacity: 0;
  transform: translateY(100%);
}

.operator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
}

.operator-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 60px;
  background-color: #333;
  padding: 20px;
  border-radius: 20px 20px 0 0;
}

.operator-header {
  display: flex;
  align-items: center;
}

.operator-header img {
  width: 60px;
  margin-right: 0.625rem;
}

.operator-wrapper .select {
  margin-top: 0.625rem;
}

.operator-wrapper .select li {
  line-height: 50px;
}

i {
  margin-right: 5px;
  color: var(--color-theme);
}

.icon-not-favorite {
  color: var(--color-theme);
}

.icon-favorite {
  color: var(--color-theme-r);
}
</style>
